<html>
<head>
<script src='http://maps.google.com/maps?file=api&amp;v=3&amp;key='></script>

    <script>

        bounds = new GLatLngBounds( new GLatLng(-90, -180)
                                  , new GLatLng(90, 180)
                                   );
        copyright = new GCopyright( 'your-copyright'
                                  , bounds
                                  , 0
                                  , "(c) 2008 Your Organization " +
                                    "<http://www.example.org/>"
                                   );
        copyrights = new GCopyrightCollection();
        copyrights.addCopyright(copyright);
        map1 = new GTileLayer(copyrights, 10, 0);
        map1.getTileUrl = function (tile, zoom) {
            base = 'http://dev.dt.asu.edu/dist/pytilemap';
            map_name = 'asu_mesa_tempe_merge_color';
            map_type = 'color';
            url = base +'/'+ map_name +'/'+ map_type +'/'+ zoom +'/'
            url += tile.x +','+ tile.y +'.png';
            console.log(url);
            return url;
        }
        map1.isPng = function () {return true;}
        map1.getOpacity = function () {return 0.8;}
  
        map2 = new GTileLayer(copyrights, 10, 0);
        map2.getTileUrl = function (tile, zoom) {
            base = 'http://dev.dt.asu.edu/dist/pytilemap';
            map_name = 'data_and_rates_for_beats';
            map_type = 'classic';
            url = base +'/'+ map_name +'/'+ map_type +'/'+ zoom +'/'
            url += tile.x +','+ tile.y +'.png';
            console.log(url);
            return url;
        }
        map2.isPng = function () {return true;}
        map2.getOpacity = function () {return 0.4;}

        function initialize () {
            var map = new GMap2(document.getElementById("map"));
            var center= new GLatLng(39.81447,-98.565388);
            map.setCenter(center, 4);
            map.addOverlay(new GTileLayerOverlay(map1));
            map.addControl(new GLargeMapControl());

            var map_more = new GMap2(document.getElementById("map_more"));
            map_more.setCenter(center, 4);
            map_more.addOverlay(new GTileLayerOverlay(map1));
            map_more.addOverlay(new GTileLayerOverlay(map2));
            map_more.addControl(new GLargeMapControl());
        }
    
    </script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #map {
            margin: 0;
            padding: 0;
            width: 800px;
            height: 800px;
        }
        #map_more {
            margin: 0;
            padding: 0;
            width: 800px;
            height: 800px;
        }
    </style>
</head>
<body onload="initialize()" onunload="GUnload()">
    One point layer<br>
    <div id="map">&nbsp;</div>       
    <br><br>Point layer + Polygon Layer<br>
    <div id="map_more">&nbsp;</div>       
</body>
</html>
